<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a>
                    <cite>员工账套设置</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">

                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>工号</th>
                            <th>雇员姓名</th>
                            <th>电子邮箱</th>
                            <th>电话号码</th>
                            <th>所属部门</th>
                            <th>套账</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody class="datalist"></tbody>
                    </table>
                </div>

                <div class="layui-card-body ">
                    <div id="demo1"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    getData(1)  //页面打开的时候，第一页
    function getData(pageNum) {

        $.ajax({
            type: 'GET',
            url: '/empsalary/search',
            dataType: 'json',
            data: {"pageNumber": pageNum , "pageSize": 10},
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                displayDataList(result.data.list)
                layui.use(['laypage'], function () {
                    let page = result.data
                    layui.laypage.render({
                        elem: 'demo1',
                        count: page.total, // 数据的总数
                        curr: page.pageNum, // 当前页码
                        limit: page.pageSize, // 每页显示的数据量
                        jump: function (obj, first) {
                            if (!first) {
                                getData(obj.curr)
                            }
                        }
                    })
                })
            }, error: function (xhr) {
                let data = JSON.parse(xhr.responseText)
                layer.msg(data.message)
            }
        })
    }

    function displayDataList(list) {

        $('.datalist').empty()

        let html = ''
        for (let i = 0; i < list.length; i++) {
            html += `<tr>
                <td>${list[i].workid}</td>
                <td>${list[i].name}</td>
                <td>${list[i].email}</td>
                <td>${list[i].phone}</td>
                <td>${list[i].deptname}</td>
                <td>${list[i].salaryname}</td>
                <td class="td-manage">
                <a title="更改账套" onclick="xadmin.open('更改账套' , '../empsalary-update.html?id=${list[i].id}&eid=${list[i].empid}&sid=${list[i].salaryid}')">编辑</a>
            </td></tr>`
        }
        $('.datalist').html(html)
    }

</script>
</body>
</html>